<template lang="html">
  <div class="musicVideo">
    <router-link  tag="div" class="videoTitle" to="/musicgedan">
    <img src="../../assets/images/icon-return45.png" alt="">
    <span>热门推荐</span>
    </router-link>
    <!-- 图片开始 -->
    <div class="banner">
       <img src="../../assets/images/skin-7.png" alt="">
    </div>
    <!-- 图片结束 -->
 <!-- video导航开始 -->
<div class="videoDaOHang">
  <ul>
    <li>
      <img src="../../assets/images/zuire.png" alt="">
      <span>最新视频</span>
    </li>
    <li>
      <img src="../../assets/images/NEW@2x.png" alt="">
      <span>最热视频</span>
    </li>
    <li>
      <img src="../../assets/images/bangdang.png" alt="">
      <span>视频榜单</span>
    </li>
    <li>
      <img src="../../assets/images/zhibo.png" alt="">
      <span>歌手直播</span>
    </li>
  </ul>
</div>
<!--video导航结束 -->
<p id="musicHr"></p>
<!--video跳转  -->
<div class="videoTiaoZhuan">
  <span>最近</span>
  <img src="../../assets/images/icon-next32.png" alt="">
</div>
<!-- 底部展示开始 -->
<MusicBottomList />
  </div>
</template>

<script>
import MusicBottomList from "../../components/musicBottomList"

export default {
  name:"musicVideo",
  data(){
    return{

    }
  },
  components:{
    MusicBottomList
  }
}
</script>

<style scoped>
.videoTitle {
  width: 100%;
  height: 0.9rem;
  line-height: 0.9rem;
  background: #5d269e;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  box-sizing: border-box;
}

.videoTitle img{
  width: 0.38rem;
  height: 0.48rem;
  position: absolute;
  left: 0.2rem;
}
.videoTitle span{
  display: block;
  font-size: 0.4rem;
  color: #ffffff;
  /* font-weight: 600; */
  height: 0.9rem;
  line-height: 0.9rem;
  margin-top: 0.1rem;
}
/*图片开始*/
.banner{
  width: 100%;
  height: 3.5rem;
}
.banner img{
  width: 100%;
  height: 100%
}
/*video导航开始*/
.videoDaOHang{
  width:100%;
  height: 1.2rem;
  padding: 0.3rem 0
}
.videoDaOHang ul{
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
}
.videoDaOHang ul li img{
  width: 0.8rem;
  height: 0.5rem;
}
.videoDaOHang ul li span{
  display: block;
  margin-top: 0.3rem;
  color: black;
  font-size: 0.3rem;
}
.videoDaOHang ul li{
  float: left;
  margin-right: 0.6rem;
  text-align: center;
}
#musicHr{
  width: 100%;
  height: 0.2rem;
  background: #cccccc;
}
.videoTiaoZhuan{
  width: 100%;
  height: 0.9rem;
  line-height: 0.9rem;
  position: relative;
  background: #ffffff;
}
.videoTiaoZhuan span{
  font-size: 0.35rem;
}
.videoTiaoZhuan img{
  position: absolute;
  right: 0.1rem;
  width: 0.3rem;
  height: 0.36rem;
  top: 50%;
  transform: translateY(-0.18rem);
}
</style>
